<template>
  <view class="topNav">
    <view :style="{ height: safeArea }" />
    <view class="topNav-login">
      <image src="../../static/images/logo.png" />
      <span style="color: #ffffff">| 新鲜 · 亲民 · 快捷</span>
    </view>
    <view class="topNav-input">
      <uni-easyinput
        class="uni-input"
        prefixIcon="search"
        suffixIcon="scan"
        placeholder="搜索商品"
        @iconClick="handleIconClick"
      ></uni-easyinput>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
onMounted(async ()=>{
  getSafeArea()
})
  //#region 查询设置的安全区坐标位置，保存到safeArea变量中查询设置的安全区坐标位置，保存到safeArea变量中
  const safeArea = ref(null);
  const getSafeArea = () => {
    const { safeArea: safeAreaInfo } = uni.getWindowInfo();
    safeArea.value = safeAreaInfo.top + "px";
  };
  //#endregion
</script>

<style scoped>
.topNav {
  background-image: url("../../../static/images/navigator_bg.png");
  padding-bottom: 15px;
}
.topNav-login {
  padding: 10px 10px 20px 10px;
  display: flex;
  align-items: center;
}
.topNav-login image {
  height: 20px;
  width: 100px;
  margin-right: 10px;
}
.topNav-input {
  padding: 0 10px;
}
.uni-input {
  border: 1px solid #ffffff;
  border-radius: 50px;
  padding: 8px;
}
</style>
